<template>
    <div ref="mainBallRef" :class="{
        'fixed w-16 h-16 rounded-full bg-blue-500 shadow-lg cursor-pointer flex items-center justify-center transition-all duration-300 z-50': true,
        'scale-110': isExpanded
    }" :style="{ position: 'absolute',left: position.x + 'px', top: position.y + 'px', zIndex: 9999 }" @click="toggleExpand"
        @mousedown="startDrag">
        <el-icon class="cur">
            <Tools />
        </el-icon>
    </div>

    <div v-for="(ball, index) in functionBalls" :key="ball.id" :class="{
        'fixed w-12 h-12 rounded-full shadow-md flex items-center justify-center transition-all duration-300': true,
        'opacity-0 pointer-events-none': !isExpanded,
        'opacity-100': isExpanded
    }" :style="{
    left: getBallPosition(index).x + 'px',
    top: getBallPosition(index).y + 'px',
    backgroundColor: ball.color,
    zIndex: 9999
}" @click="handleBallClick(ball.action)">
        <el-icon class="cur" v-if="ball.id === 1">
            <QuestionFilled />
        </el-icon>
        <el-icon class="cur" v-if="ball.id === 2">
            <Message />
        </el-icon>
        <el-icon class="cur" v-if="ball.id === 3">
            <CloseBold />
        </el-icon>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { QuestionFilled, CloseBold, Message, Tools } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
// 传出默认第一位的id
const emit = defineEmits(['Action'])
const router = useRouter();
interface Position {
    x: number;
    y: number;
}

interface FunctionBall {
    id: number;
    color: string;
    action: string;
}

const mainBallRef: any = ref<HTMLElement | null>(null);
const position = ref<Position>({ x: 1800, y: 800 });
const isExpanded = ref(false);
const isDragging = ref(false);
const dragOffset = ref<Position>({ x: 0, y: 0 });
const functionBalls = ref<FunctionBall[]>([
    { id: 1, color: '#4CAF50', action: 'QuestionFilled' },
    { id: 2, color: '#F44336', action: 'Message' },
    { id: 3, color: '#FF9800', action: 'CloseBold' }
]);

const startDrag = (event: MouseEvent) => {
    if (!mainBallRef.value) return;
    isDragging.value = true;
    dragOffset.value = {
        x: event.clientX - position.value.x,
        y: event.clientY - position.value.y
    };
    document.addEventListener('mousemove', handleDrag);
    document.addEventListener('mouseup', stopDrag);
};

const handleDrag = (event: MouseEvent) => {
    if (!isDragging.value) return;
    position.value = {
        x: event.clientX - dragOffset.value.x,
        y: event.clientY - dragOffset.value.y
    };
};

const stopDrag = () => {
    isDragging.value = false;
    document.removeEventListener('mousemove', handleDrag);
    document.removeEventListener('mouseup', stopDrag);
};

const toggleExpand = () => {
    if (!isDragging.value) {
        isExpanded.value = !isExpanded.value;
    }
};

const getBallPosition = (index: number) => {
    if (!isExpanded.value) {
        return position.value;
    }
    const radius = 80;
    const angle = -60 + (index * 60);
    const radian = (angle * Math.PI) / 180;

    return {
        x: position.value.x + radius * Math.cos(radian) + 2,
        y: position.value.y + radius * Math.sin(radian) + 2
    };
};

const handleBallClick = (action: string) => {
    switch (action) {
        case 'QuestionFilled':
            emit('Action', 'QuestionFilled');
            break;
        case 'Message':
            emit('Action', 'Message');
            break;
        case 'CloseBold':
            emit('Action', 'CloseBold');
            break;
    }
    isExpanded.value = false;
};

onMounted(() => {
    position.value.x = window.innerWidth - 150;
    position.value.y = window.innerHeight - 150;
    window.addEventListener('resize', function () {
        position.value.x = window.innerWidth - 150;
        position.value.y = window.innerHeight - 150;
    });
})
</script>
  
<style scoped lang="scss">
.main-ball__dragging {
    cursor: grabbing;
}

.cur {
    color: #fff;
    cursor: pointer;
}
</style>